<!DOCTYPE html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smiling's website</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    .box {
        margin: 400px auto;
        display: block;
        width: 0px;
        height: 0px;
        border: 50px solid transparent;
        position: relative;
        right: 50px;
        top: 200px;
        z-index: 2;
        border-top-color: rgb(252, 252, 252);
        animation: animate 1s ease-in infinite alternate;
    }
    
    @keyframes animate {
        0% {
            transition: translate(-200px, 0);
        }
        50% {
            border-top-color: rgb(158, 175, 160);
        }
        100% {
            transform: translate(0px, 50px);
        }
    }
</style>

<body>
    <h1>Hello,welcome to my website</h1>
    <h2>My key words</h2>
    <a href="#" class="box"></a>
    <div class="one">

        <img class="first" src="need_画板 1.jpg" alt="">
        <img class="milktea" src="奶茶.jpg" alt="">
        <img class="cat" src="千寻猫.jpg" alt="">
        <img class="board" src="调色板.jpg" alt="">




    </div>
    <div class="two">
        <div class="circleone">

            <a href="#1"><br> About<br> me</a>
        </div>
        <div class="circletwo">
            <a href="#2"><br> My<br> works</a>
        </div>
    </div>
    <div class="circlethree">
        <p class="mulu">Catalogue</p>
    </div>
    </div>

    <div class="three">
        <div class="me">
            <p class="aboutme" id="1">About me</p>
        </div>
        <img class="wodezihua" src="MY ROSE.png" alt="">
        <p class="ziwojieshao">
            Greetings! This is Zheng Xiaoyan. I prefer to be called as"Xiaoyan” or "Smiling".<br><br>I love drawing, drinking milktea and playing with my cat.<br><br>My dream is to be an UX designer, and now I'm studying in the relevant major.<br><br>I
            can draw by hand and board. I am able to use Photoshop, Adobe Illustrator, and certainly I can type the code.<br><br>(The head portrait of mine on the left is drawn by myself, emm...a bit looks like myself.)


        </p>

        <div class="yellow">
            <p class="heziwenzi">My works are continued to be updated...</p>

        </div>
        <p class="weibo">Weibo：@Redlipgloss (Not welcome to follow.)</p>
    </div>


    <div class="four">
        <div class="myworks">
            <p class="mw" id="2">My Works</p>

        </div>

        <p class="AOD">AOD works</p>
        <img class="aodone" src="preview_aod_0.jpg" alt="">
        <img class="aodtwo" src="猫与奶茶.jpg" alt="">

        <p class="hand">Hand drawings</p>
        <img class="handone" src="我的.jpg" alt="">
        <img class="handtwo" src="手绘２.jpg" alt="">
        <img class="handthree" src="手绘３.jpg" alt="">
        <img class="handfour" src="手绘四.jpg" alt="">
        <p class="banhui">Plate Drawings</p>
        <img class="boardone" src="ｈｕｈｕａｎ.jpg" alt="">
        <img class="boardtwo" src="ｗｏ.png" alt="">
        <p class="banshi">Format Design</p>
        <img class="taylor" src="Taylor Swift_画板 1.jpg" alt="">
        <p class="end">To be continued...</p>
    </div>
    <div class="footer">


        <div class="bottom">
            Copyright 2020 All Rights Reserved @ Zheng Xiaoyan 531096534@qq.com
        </div>
    </div>








</body>

</html